<template>
  <div class="app-container">
    <div class="common-content skill">
      <div class="list" >
        <div class="name">HTML</div>
        <div class="progress">
          <el-progress :text-inside="true" :stroke-width="width" :percentage="percentage" :color="color"></el-progress>
        </div>
        <div class="operate flexCenter">
          <el-button-group>
            <el-button size="mini" icon="el-icon-minus" @click="decrease"></el-button>
            <el-button size="mini" icon="el-icon-plus" @click="increase"></el-button>
          </el-button-group>
        </div>
        <div class="color flexCenter">
          <el-color-picker @change="selectColor" v-model="color" size="mini"></el-color-picker>
          <span>颜色选择器</span>
        </div>
      </div>

<!--      新增技能-->
      <div class="list" v-show="isAddSkillShow">
        <div class="name add-name"><el-input clearable v-model="addNewName" placeholder="请输入技能名"></el-input>
        </div>
        <div class="progress">
          <el-progress :text-inside="true" :stroke-width="width" :percentage="addPercentage" :color="color"></el-progress>
        </div>
        <div class="operate flexCenter">
          <el-button-group>
            <el-button size="mini" icon="el-icon-minus" @click="decrease"></el-button>
            <el-button size="mini" icon="el-icon-plus" @click="increase"></el-button>
          </el-button-group>
        </div>
        <div class="color flexCenter">
          <el-color-picker @change="selectColor" v-model="color" size="mini"></el-color-picker>
          <span>颜色选择器</span>
        </div>
      </div>
      <!--  保存  -->
      <div class="submit operate">
          <el-button type="success" @click="add">新增</el-button>
          <el-button type="info" v-show="isAddSkillShow" @click="cancel">取消</el-button>
          <el-button type="primary" @click="submit">保存</el-button>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name:'skill',
    data() {
      return {
        width:15,
        percentage: 20,
        customColors: [
          {color: '#f56c6c', percentage: 20},
          {color: '#e6a23c', percentage: 40},
          {color: '#5cb87a', percentage: 60},
          {color: '#1989fa', percentage: 80},
          {color: '#6f7ad3', percentage: 100}
        ],
        color: '#19be6b', //默认颜色
        predefineColors: [ //预选颜色
          '#ff4500',
          '#ff8c00',
          '#ffd700',
          '#90ee90',
          '#00ced1',
          '#1e90ff',
          '#c71585',
          'rgba(255, 69, 0, 0.68)',
          'rgb(255, 120, 0)',
          'hsv(51, 100, 98)',
          'hsva(120, 40, 94, 0.5)',
          'hsl(181, 100%, 37%)',
          'hsla(209, 100%, 56%, 0.73)',
          '#c7158577'
        ],
        addNewName:'',//新增技能名字
        isAddSkillShow:false,//是否显示新增技能行
        addPercentage:60,//默认新增技能百分比
      };
    },
    methods: {
      //取消新增技能
      cancel(){
        this.$message.warning('取消成功~')
        this.isAddSkillShow = false
        this.addNewName = ''
      },
      //颜色选择
      selectColor(){
        console.log(1231)
      },
      //新增
      add(){
        this.isAddSkillShow = true
      },
      //保存
      submit(){
        if(this.isAddSkillShow){
          if(this.addNewName.trim()==''){
            this.$message.warning('请输入技能名~')
            return
          }
        }
        this.$message.success('添加成功~')
      },
      customColorMethod(percentage) {
        if (percentage < 30) {
          return '#909399';
        } else if (percentage < 70) {
          return '#e6a23c';
        } else {
          return '#67c23a';
        }
      },
      increase() {
        this.percentage += 1;
        if (this.percentage > 100) {
          this.percentage = 100;
        }
      },
      decrease() {
        this.percentage -= 1;
        if (this.percentage < 0) {
          this.percentage = 0;
        }
      }
    }
  }
</script>

<style scoped lang="scss">
.app-container{
  .skill {
    height: 100%;
    width: 900px;
    .list{
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      flex-wrap: nowrap;
      .name{
        flex: 2;
      }
      .add-name{
        padding: 0 5px;
        box-sizing: border-box;
      }
      .progress{
        flex: 5;
      }
      .operate{
        flex: 1;
      }
      .color{
        flex: 2;
        >span{
          margin-left: 10px;
        }
      }
    }
  }
  .operate{
    display: flex;
    width: 300px;
  }

}
</style>
